<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				height: 1000px;
			}

			#header {
				width: 100%;
				position: absolute;
				bottom: 0;
			}

			#header-wrap {
				width: 100%;
				position: fixed;
				background-color: #e0e0e0;
			}
		</style>
	</head>
	<body>
		<div id="header-wrap">
			<div id="header" class="clear">
				<nav>
					<h1>Prototype</h1>
				</nav>
			</div>
		</div>


	</body>
	<script type="text/javascript">
		function (){
		    var previousScroll = 0;
		    var navbar = document.getElementById('navbar'),
		        navClasses = navbar.classList; 
		
		    window.addEventListener('scroll', function(e){
		       var currentScroll = window.scrollY;
		       var isDown = currentScroll > previousScroll;
		
		       if ( isDown && !navClasses.contains('scrolled') ){
		          // scrolling down, didn't add class yet
		          navClasses.add('scrolled'); // we hide the navbar
		       } else if ( !isDown ){
		          // scrolling up
		          navClasses.remove('scrolled'); // won't error if no class found
		       }
		
		       // always update position
		       previousScroll = currentScroll;
		    });
		}()); //run this anonymous function immediately
	</script>

</html>
